<template>
  <div class="main-container">
    <div class="left_container">
      <div class="search_container">
        <div class="search_item">
          <div class="name">部门编码</div>
          <div class="input"><el-input v-model="pageData.deptCode" clearable @clear="getList" /></div>
        </div>
        <div class="search_item">
          <div class="name">部门名称</div>
          <div class="input"><el-input v-model="pageData.deptName" clearable @clear="getList" /></div>
        </div>
        <div class="search_item">
          <div class="button"><el-button type="search" @click.stop="getList">搜索</el-button></div>
        </div>
        <div class="search_item">
          <div class="name">上级部门</div>
          <div class="input"><el-input v-model="pageData.parentName" clearable @clear="getList" /></div>
        </div>
        <div class="search_item">
          <div class="name">部门负责人</div>
          <div class="input"><el-input v-model="pageData.leaderName" clearable @clear="getList" /></div>
        </div>
      </div>
      <div ref="middle_container" class="middle_container">
        <el-table
          ref="table"
          :data="tableData"
          stripe
          border
          :height="tableHeight"
          style="width: 99.9%"
          highlight-current-row
          @row-click="rowClick"
        >
          <el-table-column
            type="selection"
            width="50"
          />
          <el-table-column
            prop="deptCode"
            label="部门编码"
          />
          <el-table-column
            prop="deptName"
            label="部门名称"
          />
          <el-table-column
            prop="parentName"
            label="上级部门"
          />
          <el-table-column
            prop="leaderName"
            label="部门负责人"
          />
          <el-table-column
            prop="remark"
            label="备注"
          />
          <infinite-loading
            ref="infiniteLoading"
            slot="append"
            force-use-infinite-wrapper=".el-table__body-wrapper"
            @infinite="loadNext"
          />
        </el-table>
      </div>
      <div class="button_container">
        <el-button type="add" @click.stop="add">新增</el-button>
        <RemoveButton style="width: 25%" :page="this" />
        <ImportButton style="width: 25%" :page="this" />
        <ExportButton style="width: 25%" :page="this" />
      </div>
    </div>
    <div class="right_container">
      <div class="header_container">
        编辑部门
      </div>
      <div class="add_container">
        <div class="add_item">
          <div class="name"><label class="bitian">*</label>部门编码</div>
          <div v-if="isEdit" class="input">
            <RuleCodeDiv :band-value.sync="addData.deptCode" table-name="sys_dept" column-name="dept_code" />
          </div>
          <div v-else class="show">{{ addData.deptCode }}</div>
        </div>
        <div class="add_item">
          <div class="name"><label class="bitian">*</label>部门名称</div>
          <div v-if="isEdit" class="input"><el-input v-model="addData.deptName" clearable placeholder="请填写" /></div>
          <div v-else class="show">{{ addData.deptName }}</div>
        </div>
        <div class="add_item">
          <div class="name">上级部门</div>
          <div v-if="isEdit" class="input">
            <el-select
              v-model="addData.parentId"
              placeholder="点击搜索"
              filterable
              clearable
              remote
              reserve-keyword
              :remote-method="remoteMethod1"
            >
              <el-option
                v-for="item in deptOptions"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
              />
            </el-select>
          </div>
          <div v-else class="show">{{ addData.parentName }}</div>
        </div>
        <div class="add_item">
          <div class="name">部门负责人</div>
          <div v-if="isEdit" class="input">
            <el-select
              v-model="addData.leader"
              placeholder="点击搜索"
              filterable
              clearable
              remote
              reserve-keyword
              :remote-method="remoteMethod2"
            >
              <el-option
                v-for="item in userOptions"
                :key="item.userId"
                :label="item.realName"
                :value="item.userId"
              />
            </el-select>
          </div>
          <div v-else class="show">{{ addData.leaderName }}</div>
        </div>
        <div class="add_item">
          <div class="name">备注</div>
          <div v-if="isEdit" class="textarea"><el-input v-model="addData.remark" clearable placeholder="请填写" type="textarea" :rows="3" /></div>
          <div v-else class="show">{{ addData.remark }}</div>
        </div>
      </div>
      <div class="button_container">
        <el-button v-if="isEdit" type="save" @click.stop="save">保存</el-button>
        <el-button v-else type="edit" @click.stop="edit">编辑</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import { listByPage, list, add, edit, remove, getInfo } from '@/api/system/dept'
import { list as list2 } from '@/api/system/user'
import { mapGetters } from 'vuex'
import RemoveButton from '@/components/JLink/RemoveButton'
export default {
  name: 'Index',
  computed: {
    ...mapGetters([
      'userId', 'userName'
    ])
  },
  components: { RemoveButton }, // 组件注册
  data() {
    return {
      pageData: {
        deptCode: undefined,
        deptName: undefined,
        parentName: undefined,
        leaderName: undefined,
        remark: undefined,
        pageNum: 1,
        pageSize: 15,
        orderByColumn: 'updateTime',
        isAsc: 'desc'
      },
      addData: {
        deptId: '--',
        deptCode: '--',
        deptName: '--',
        parentId: '--',
        parentName: '--',
        leader: '--',
        leaderName: '--',
        remark: '--'
      },
      mainId: 'deptId',
      pageName: '部门管理',
      tableHeight: '0',
      tableData: [],
      deptOptions: [],
      userOptions: [],
      isEdit: false, // false:右侧区域仅为展示,true:右侧区域可编辑
      removeClick: false // 是否点了删除按钮
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = this.$refs.middle_container.offsetHeight
    })
  },
  methods: {
    rowClick(row, column, event) { // 单击行选中
      this.getInfo(row)
    },
    getList() { // 获取数据
      this.pageData.pageNum = 1
      this.tableData = []
      this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
    },
    loadNext($state) { // 加载下一页数据
      listByPage(this.pageData).then(res => {
        if (res.data.length > 0) {
          this.tableData = this.tableData.concat(res.data)
          this.pageData.pageNum++
          $state.loaded()
        } else {
          $state.complete()
        }
      })
    },
    add() { // 新增按钮
      this.$refs.table.setCurrentRow(-1)// 清除高亮
      Object.keys(this.addData).forEach(key => { // 清空右边数据
        this.addData[key] = undefined
      })
      this.isEdit = true // 右边输入框显示出来
    },
    edit() { // 编辑按钮
      this.remoteMethod1(this.addData.parentName)
      this.remoteMethod2(this.addData.leaderName)
      if (this.addData[this.mainId] == '--') {
        this.$message({
          message: '请先选择要操作的数据',
          type: 'warning'
        })
      } else {
        this.isEdit = true // 右边输入框显示出来
      }
    },
    checkForm() {
      if (!this.addData.deptCode) {
        this.$message({
          message: '请输入部门编码',
          type: 'warning'
        })
        return false
      }
      if (!this.addData.deptName) {
        this.$message({
          message: '请输入部门名称',
          type: 'warning'
        })
        return false
      }
      return true
    },
    save() { // 保存按钮
      if (this.checkForm()) {
        if (!this.addData[this.mainId]) { // 新增
          add(this.addData).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            Object.keys(this.addData).forEach(key => { // 清空右边数据
              this.addData[key] = undefined
            })
            this.getList()
          })
        } else { // 编辑
          edit(this.addData).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.getList()
          })
        }
      }
    },
    // 当前页的删除接口
    doRemove(data) {
      Object.keys(this.addData).forEach(key => { // 给右边数据赋值
        this.addData[key] = '--'
      })
      this.isEdit = false // 右边输入框隐藏
      return remove(data)
    },
    getInfo(row) { // 获取右侧数据
      getInfo(row[this.mainId]).then(res => {
        Object.keys(this.addData).forEach(key => { // 给右边数据赋值
          this.addData[key] = res.data[key] || undefined
        })
      })
      this.isEdit = false // 右边输入框隐藏
    },
    remoteMethod1(value) { // 选择框
      if (!value) {
        this.deptOptions = []
        return
      }
      list({ deptCode: value, deptName: value }).then(res => {
        this.deptOptions = res.data
      })
    },
    remoteMethod2(value) { // 选择框
      if (!value) {
        this.userOptions = []
        return
      }
      list2({ userName: value }).then(res => {
        this.userOptions = res.data
      })
    },
    getUser() { // 获取数据
      list2().then(res => {
        this.userOptions = res.data
      })
    },
    exportAll(data) {
      return listByPage(data)
    }
  }
}
</script>

<style lang="less" scoped>
.main-container{
  .left_container{
    .button_container{
      .el-button{
        width: 25%;
      }
    }
  }
  .right_container{
    .button_container{
      .el-button{
        width: 100%;
      }
    }
  }

}
</style>
